<template>
    <div id="home" class="home">
        <div class="main">
            <div class="top">
                <div class="name">Admin</div>
            </div>
            <div class="content">
                <div class="left">
                    <div class="left_title">
                        <span>
                             select patient information：
                        </span>

                    </div>
                    <div class="left_content">
                        <div class="left_spot">·</div>
                        <div class="left_label">institution：</div>
                        <div class="left_value">
                            <el-tooltip   effect="light" content=" ZhongShan Hospital" placement="right">
                                <span>ZhongShan Hospital</span>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="left_content">
                        <div class="left_spot">·</div>
                        <div class="left_label">Name：</div>
                        <div class="left_value">ZhangSan</div>
                    </div>
                    <div class="left_content">
                        <div class="left_spot">·</div>
                        <div class="left_label">Patient ID：</div>
                        <div class="left_value">7599979</div>
                    </div>
                    <div class="left_content">
                        <div class="left_spot">·</div>
                        <div class="left_label">Patient Sex：</div>
                        <div class="left_value">M</div>
                    </div>
                    <div class="left_content">
                        <div class="left_spot">·</div>
                        <div class="left_label">Patient Age：</div>
                        <div class="left_value">19</div>
                    </div>
                    <div class="left_content">
                        <div class="left_spot">·</div>
                        <div class="left_label">Physician：</div>
                        <div class="left_value">Wang</div>
                    </div>
                    <div class="left_content">
                        <div class="left_spot">·</div>
                        <div class="left_label">Study Description：</div>
                        <div class="left_value">
                            <el-tooltip   effect="light" content=" ABDOMEN" placement="right">
                                <span>ABDOMEN</span>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="left_content">
                        <div class="left_spot">·</div>
                        <div class="left_label">Tratment Unit：</div>
                        <div class="left_value">
                            <el-tooltip   effect="light" content=" True Beam1" placement="right">
                                <span>True Beam1</span>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="left_content">
                        <div class="left_spot">·</div>
                        <div class="left_label">Cone：</div>
                        <div class="left_value">
                            <el-tooltip   effect="light" content=" Cone#1/Cone#3/Cone#4/Cone#5" placement="right">
                                <span>Cone#1/Cone#3/Cone#4/Cone#5</span>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="r_left">
                        <div class="jt">
                            <img src="../../assets/images/jt.png">
                        </div>

                        <div class="r_box0"></div>
                        <div class="r_box1"></div>
                        <div class="r_box2"></div>
                        <div class="r_box3"></div>
                        <div class="r_box4"></div>
                        <div class="r_box5"></div>
                        <div class="r_box6"></div>
                        <div class="r_box7"></div>
                        <div class="r_box8"></div>
                        <div class="r_box9"></div>
                    </div>
                    <div class="r_right">

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'index',
    data () {
      return {
        value: false
      }
    }
  }
</script>

<style scoped>
    page{
    }
    body{
        pointer-events: none;
        background-color: #1d2027;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .main{
        width:100%;
        height: 100%;
    }
    .top{
        width: 100%;
        height: 120px;
        background-color: #242730;
    }
    .content{
        width: 100%;
        height: 960px;
        /*border: 1px solid red;*/
        background-color: #1d2027;
    }
    .left{
        width: 410px;
        height: 960px;
        background-color: #22252c;
        float: left;
        /*border: 1px solid red;*/
    }
    .right{
        width: 1470px;
        height:930px;
        float: left;
        background-color: #242730;
        margin-top: 15px;
        margin-left: 20px;
        /*border: 1px solid blue;*/
    }
    .name{
        width: 410px;
        height: 120px;
        line-height: 120px;
        text-align: center;
        font-size: 30px;
        color: #e2b890;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .left_title{
        color: white;
        width: 100%;
        height: 65px;
        background-color: #826f5e;
        line-height: 65px;
        font-size: 25px;
        margin-top: 45px;
    }
    .left_title span{
        margin-left: 20px;
    }
    .left_content{
        width: 100%;
        height: 60px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .left_spot{
        color: #e2b890;
        height: 60px;
        display: inline-block;
        font-size: 50px;
        line-height: 60px;
        position: relative;
        top: 10px;
    }
    .left_label{
        color: #e2b890;
        height: 60px;
        display: inline-block;
        font-size: 28px;
        line-height: 60px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .left_value{
        color: #e2b890;
        height: 60px;
        display: inline-block;
        font-size: 28px;
        line-height: 60px;
    }
    .r_left{
        height: 100%;
        width: 70%;
        float: left;
        border: 1px solid red;
        background: url("../../assets/images/y.png") center no-repeat;
        background-size: 800px 800px;
        position: relative;
    }
    .jt{
        position: relative;
        top: 200px;
    }
    .r_right{
        height: 100%;
        width: 28%;
        margin: 0 auto;
        float: right;
        border: 1px solid red;
    }
    .r_box1{
        width: 55px;
        height: 55px;
        position: absolute;
        background-color: #e5b380;
        border-radius: 50%;
        left:260px;
        top: 620px;
    }
    .r_box2{
        width: 70px;
        height: 70px;
        position: absolute;
        background-color: #e5b380;
        border-radius: 50%;
        left:210px;
        top: 500px;
    }
    .r_box3{
        width: 80px;
        height: 80px;
        position: absolute;
        background-color: #e5b380;
        border-radius: 50%;
        left:210px;
        top: 375px;
    }
    .r_box4{
        width: 90px;
        height: 90px;
        position: absolute;
        background-color: #e5b380;
        border-radius: 50%;
        left:270px;
        top: 250px;
    }
    .r_box5{
        width: 100px;
        height: 100px;
        position: absolute;
        background-color: #e5b380;
        border-radius: 50%;
        left:400px;
        top: 160px;
    }
    .r_box6{
        width: 110px;
        height: 110px;
        position: absolute;
        background-color: #e5b380;
        border-radius: 50%;
        left:570px;
        top: 170px;
    }
    .r_box7{
        width: 120px;
        height: 120px;
        position: absolute;
        background-color: #e5b380;
        border-radius: 50%;
        left:680px;
        top: 300px;
    }
    .r_box8{
        width: 130px;
        height: 130px;
        position: absolute;
        background-color: #e5b380;
        border-radius: 50%;
        left:680px;
        top: 480px;
    }
    .r_box9{
        width: 140px;
        height: 140px;
        position: absolute;
        background-color: #e5b380;
        border-radius: 50%;
        left:555px;
        top: 620px;
    }
</style>
